<template>
  <div class="w-100 h-1 flex-1">
    <div v-if="showImg" class="w-100 h-100 flex align-center justify-center background-image">
      <img
        style="min-width: 400px; width: 50%; height: auto"
        :src="deviceImg"
        @click="showPortTab"
      >
    </div>
    <div v-show="!showImg" class="port-box p-20 h-100 overflow-auto">
      <div class="">
        <div v-for="face in newfaceList" :key="face.partId">
          <h3 class="mb-10">{{ face.partFlag.replace('M', 'B') + ' ' + $t('FACE') }}</h3>
          <div class="w-100 flex justify-center">
            <div class="border-box">
              <div v-for="(row, rowIndex) in 2" :key="row" class="flex align-center p-5">
                <span class="font-mini text-color text-center port-order">
                  {{ `${rowIndex * 12 + 1}  ~ ${rowIndex * 12 + 12}` }}
                </span>
                <div class="flex justify-around" style="width: 360px">
                  <div v-for="(item, itemIndex) in 12" :key="item" class="port-img">
                    <img
                      :class="portData(face.portList[rowIndex * 12 + itemIndex]) ? 'scaleImg' : ''"
                      :title="face.portList[rowIndex * 12 + itemIndex].portInfo.bizName"
                      :src="getImg(face.portList[rowIndex * 12 + itemIndex])"
                      @click="portClick(face.portList[rowIndex * 12 + itemIndex])"
                    >
                    <EidPopover :eid-data="face.portList[rowIndex * 12 + itemIndex]" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="loadmore" />
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import EidPopover from './EidPopover'
  export default {
    components: { EidPopover },
    mixins: [mixin],
    data() {
      return {}
    },
    methods: {
      portData(portData) {
        return (
          portData.selected ||
          (this.selectedPort && this.selectedPort.connPortId === portData.portInfo.portId)
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
  .port-img {
    transition: all 0.3s;
  }
  .scaleImg {
    transform: scale(1.3);
  }
</style>
